<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ul {
        list-style: none;
      }
      li {
        padding: 10px;
      }
      li:nth-child(odd) {
        border-color: #16a885;
        color: white;
      }
    </style>
  </head>
  <body></body>
</html>

<script>
  /*
    const hd = ["媒体查询响应式布局", "FLEX弹性盒模型", "Grid栅格系统"];

    function temlate() {
        return `<ul> ${hd.map((item) => `<li> ${item}</li>`).join("")} </ul>`;
    }

    document.body.innerHTML = temlate();
  */

  let lessons = [
    { title: "后盾人媒体查询响应式布局", author: "jason" },
    { title: "FLex弹性布局", author: "jason" },
    { title: "Grid栅格系统", author: "jason" },
  ];

  function template() {
    return `<ul>
            ${lessons
              .map((item) => {
                return link`<li> 作者: ${item.author} 课程:${item.title}  </li>`;
              })
              .join("")}
        </ul>`;
  }

  function link(strings, ...vars) {
    console.log(vars); // [${item.author}, ${item.title}]

    return strings
      .map((str, key) => {
        console.log(str, key); // str = <li>作者: 课程: </li> 这三个
        // key是下标 0 1 2

        return (
          str +
          (vars[key]
            ? vars[key].replace(
                "jason",
                `<a href="https://www.houdunren.com">jason</a>`
              )
            : "")
        );
      })
      .join("");
  }

  document.body.innerHTML = template();

  let myName = "jason";

  for (let i = 0; i < myName.length; i++) {
    let span = document.createElement("span");
    span.style.fontSize = (i + 1) * 10 + "px";
    span.innerHTML = myName[i];
    document.body.append(span);
  }

  const word = ["php", "css"];
  const string = "我喜欢在后盾人学习php与css知识";
  const replaceString = word.reduce((pre, word) => {
    // pre就是你传入来的string，每次都会变。变得就是你每次的return值
    return pre.replace(word, `<a href="?w=${word}"> ${word} </a>`);
  }, string);

  document.body.innerHTML += replaceString;

  while (true) {
    const year = prompt("后盾人哪年成立的?").trim();
    if (!year) continue;
    console.log(year == "2010" ? "回答正确" : "输入错误");
    break;
  }
</script>
